<template>
  <view class="container">
    
    <!-- 表单组件 -->
    <view class="form-wrapper">
      <u-form :model="form" ref="uForm" label-width="140rpx">
        <u-form-item label="预约人姓名" prop="name">
          <u-input v-model="form.name" placeholder="请输入预约人姓名" />
        </u-form-item>
        <u-form-item label="预约人电话" prop="phone">
          <u-input v-model="form.phone" placeholder="请输入预约人手机号" />
        </u-form-item>
        <u-form-item label="预约时间" prop="time">
            <u-input v-model="form.time" placeholder="请选择预约时间" @click="pickerTime.show = true" disabled="true"/>
			<u-picker mode="time" v-model="pickerTime.show" @confirm="changeTime"
			:params="pickerTime.params"></u-picker>
        </u-form-item>
        <u-form-item label="预约员工" prop="staff_id">
          <select-staff v-model="form.staff_id"/>
        </u-form-item>
        <u-form-item label="预约项目">
		  <u-radio-group v-model="form.items">
			<u-radio name="美容">美容</u-radio>
			<u-radio name="驱虫">驱虫</u-radio>
			<u-radio name="打疫苗">打疫苗</u-radio>
		  </u-radio-group>
        </u-form-item>
        <u-form-item v-if="petList.length" label="我的宠物">
		  <u-radio-group v-model="form.pet_name">
			<u-radio :name="dataItem.name" v-for="(dataItem, index) in petList" :key="index">{{ dataItem.name }}</u-radio>
		  </u-radio-group>
        </u-form-item>
      </u-form>
    </view>
    <!-- 操作按钮 -->
    <view class="footer">
      <view class="btn-wrapper">
        <view class="btn-item btn-item-main" :class="{ disabled }" @click="handleSubmit()">保存</view>
      </view>
    </view>
  </view>
</template>

<script>
  // import SelectTime from '@/components/select-time/select-time'
  import SelectStaff from '@/components/select-staff/select-staff'
  import Verify from '@/utils/verify'
  import * as AppointmentApi from '@/api/appointment'
  import * as UserApi from '@/api/user'
  import * as PetApi from '@/api/pet'

  // 表单字段元素
  const form = {
    name: '',
    phone: '',
    staff_id: 0,
    time: '',
	pet_name: '',
    items: '美容'
  }

  // 表单验证规则
  const rules = {
    name: [{
      required: true,
      message: '请输入姓名',
      trigger: ['blur', 'change']
    }],
    phone: [{
      required: true,
      message: '请输入手机号',
      trigger: ['blur', 'change']
    }],
  }

  export default {
    components: {
      SelectStaff,
      // SelectTime,
    },
    data() {
      return {
		staffList: [],
		petList: [],
		pickerTime: {
			show: false,
			params: {
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: true
			},
		},
        form,
        rules,
        // 按钮禁用
        disabled: false
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
		// 获取员工信息
		this.getInitData()
	},

    // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
    onReady() {
      this.$refs.uForm.setRules(this.rules)
    },

    methods: {
		changeTime(e) {
			// console.log(e)
			this.form.time = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':00';
			console.log(this.form.time)
		},
		
	  // 获取当前记录详情
	  getInitData() {
		this.getUserPet()
		this.getUserInfo()
	  },
	  
      getUserPet() {
          const app = this
          return new Promise((resolve, reject) => {
            PetApi.list()
              .then(result => {
                app.petList = result.data.list
                resolve(result)
              })
              .catch(reject)
          })
      },
	  
      // 获取当前用户信息
      getUserInfo() {
        const app = this
		UserApi.info()
            .then(result => {
              app.form.name = result.data.userInfo.nick_name
              app.form.phone = result.data.userInfo.mobile
            })
            .catch(err => {
              if (err.result && err.result.status == 401) {
                app.isLogin = false
                resolve(null)
              } else {
                reject(err)
              }
            })
      },
      // 表单提交
      handleSubmit() {
        const app = this
        if (app.disabled) {
          return false
        }
        app.$refs.uForm.validate(valid => {
          if (valid) {
            app.disabled = true
			app.form.staff_id = app.form.staff_id[0].value
			// app.form.time = app.form.time[0].lable
            AppointmentApi.create(app.form)
              .then(result => {
                app.$toast(result.message)
                uni.navigateBack()
              })
              .finally(() => app.disabled = false)
          }
        })
      }

    }
  }
</script>

<style>
  page {
    background: #f7f8fa;
  }
</style>
<style lang="scss" scoped>
  .page-title {
    width: 94%;
    margin: 0 auto;
    padding-top: 40rpx;
    font-size: 28rpx;
    color: rgba(69, 90, 100, 0.6);
  }

  .form-wrapper {
    margin: 20rpx auto 20rpx auto;
    padding: 0 40rpx;
    width: 94%;
    box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
    border-radius: 16rpx;
    background: #fff;
  }

  /* 底部操作栏 */

  .footer {
    margin-top: 60rpx;

    .btn-wrapper {
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
    }

    .btn-item {
      flex: 1;
      font-size: 28rpx;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      color: #fff;
      border-radius: 50rpx;
    }

    .btn-item-main {
      background: linear-gradient(to right, #f9211c, #ff6335);

      // 禁用按钮
      &.disabled {
        background: #ff9779;
      }
    }

  }
</style>
